<template>
  <view class="panel recommend">
    <view class="item" v-for="item in PopularityArr" :key="item.id">
      <view>
        <view class="title">
          <text class="title-one">{{ item.title }}</text>
          <text class="title-two">{{ item.alt }}</text>
        </view>
        <navigator
          hover-class="none"
          :url="`/pages/recommend/recommend?type=${item.type}`"
          class="cards"
        >
          <image
            mode="aspectFit"
            v-for="img in item.pictures"
            :key="img"
            :src="img"
          ></image>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getPopularity } from "@/api/home";
import { onMounted, ref } from "vue";
const PopularityArr = ref([]);
onMounted(async () => {
  const res = await getPopularity();
  PopularityArr.value = res.result;
});
</script>

<style scoped lang="scss">
.panel {
  display: flex;
  width: 100vw;
  flex-wrap: wrap;
  .item {
    padding-left: 20px;
    padding-bottom: 15px;
    .title {
    
      display: flex;
      align-items: center;
      .title-one {
        font-size: 18px;
        font-weight: 500;
        padding-right: 10px;
      }
      .title-two {
        font-size: 14px;
        color: #999;
      }
    }
    image {
      width: 87px;
      height: 90px;
      padding-right: 5px;
      vertical-align: middle;
    }
  }
}
</style>